<template>
  <div class="box">
    <el-message v-if="show1" :type="type" :title="title"></el-message>
    <Tips v-if="message" @msg="msg" title="请选择至少一件商品"></Tips>
    <topTitle title="购物车"></topTitle>
    <div v-show="list.length == 0" class="none">
      <img src="https://img01.yzcdn.cn/vant/empty-image-default.png" alt="" />
      <p>暂无订单</p>
    </div>
    <div v-show="list.length > 0" class="content">
      <cartItem
        :show="show"
        v-for="item in list"
        :item="item"
        :key="item.id"
        @open="open"
      ></cartItem>
    </div>
    <div class="submit" v-show="list.length > 0">
      <div class="checked">
        <div class="check">
          <div class="checkbox">
            <input type="checkbox" @click="eidtCheckedAll" v-model="all" />
          </div>
        </div>
        全选
      </div>
      <div class="right">
        <div class="heji">
          合计：<span
            >￥<i>{{ getPrice }}</i></span
          >
        </div>
        <button @click="submit" class="submitBtn">提交订单</button>
      </div>
    </div>
    <footerNavVue title="购物车"></footerNavVue>
    <confirmMaskVue :display="show" @close="close" @del="del"></confirmMaskVue>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import topTitle from "@/components/common/top-title.vue";
import footerNavVue from "@/components/common/footer-nav.vue";
import cartItem from "@/components/cart-item.vue";
import Tips from "@/components/common/tips.vue";
import ElMessage from "@/components/common/el-message.vue";
import confirmMaskVue from "@/components/common/confirmMask.vue";
export default {
  name:'',
  components: {
    footerNavVue,
    topTitle,
    cartItem,
    confirmMaskVue,
    Tips,
    ElMessage,
  },
  data() {
    return {
      // 要删除的商品
      delGood: "",
      message: false,
      title: "",
      show1: false,
      type: "success",
      all: false,
      show: false,
    };
  },
  created() {
    this.getList();
    this.all = this.checkedAll;
  },
  methods: {
    ...mapActions("cart", ["getList", "delCart"]),
    ...mapMutations("cart", ["setCheckedAll", "setChecked"]),

    eidtCheckedAll() {
      this.setCheckedAll();
    },
    open(val) {
      this.delGood = val;
      this.show = true;
    },
    del(val) {
      this.show = val;
      this.delCart(this.delGood);
      setTimeout(() => {
        this.getList();
      }, 100);
    },
    close(val) {
      this.show = val;
    },
    submit() {
      let good = this.list.some((item) => {
        return item.checked;
      });
      if (good) {
        this.$router.push("/orderconfirm");
      } else {
        this.message = true;
      }
    },
    msg(val) {
      this.message = val;
    },
  },
  computed: {
    ...mapState("cart", ["list", "code", "checkedAll"]),
    ...mapGetters("cart", ["getPrice"]),
  },
  watch: {
    checkedAll() {
      this.all = this.checkedAll;
    },
    list() {
      this.setCheckedAll();
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  height: 100vh;
  width: 100vw;
  background: #eee;
  .none {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #eee;
    p {
      margin-top: 0.42667rem;
      padding: 0 1.6rem;
      color: #969799;
      font-size: 0.37333rem;
      line-height: 0.53333rem;
    }
  }
  .content {
    overflow: hidden;
    padding-bottom: 2.4rem;
    padding-top: 1.0667rem;
  }
  .submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 1.0667rem;
    width: 100%;
    background: #fff;
    height: 1.3333rem;
    .checked {
      display: flex;
      align-items: center;
      font-size: 0.2667rem;
      .check {
        // width: 1.3333rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.2667rem;
        margin-right: 0.1333rem;
        .checkbox {
          position: relative;
          text-align: center;
          line-height: 0.4rem;
          width: 0.3733rem;
          height: 0.3733rem;
          margin-left: 0.2667rem;
          border: 1px solid #c8c8c8;
          border-radius: 50%;
          overflow: hidden;
          input[type="checkbox"] {
            position: absolute;
            left: -0.0267rem;
            top: -0.0267rem;
            width: 0.4267rem;
            height: 0.4267rem;
            border: 1px solid #fff;
            margin: 0;
          }
        }
      }
    }
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 0.2667rem;
      .heji {
        font-size: 0.2667rem;
        margin-right: 0.2667rem;
        span {
          color: red;
          i {
            font-style: normal;
            font-size: 0.4rem;
          }
        }
      }
      .submitBtn {
        color: #fff;
        width: 2.1333rem;
        height: 0.8rem;
        border: none;
        border-radius: 0.6667rem;
        font-size: 0.3rem;
        background: linear-gradient(#fe5f33, #ee0b24);
      }
    }
  }
}
</style>
